<script setup>
import {inject} from "vue";
import router from "@/router/index.js";
import {logOut} from "@/util/ApiUtil.js";

defineProps({
  isShow: {
    type: Object,
    required: true,
    default: {}
  }
});

const DEFAULT_WORD = inject("DEFAULT_WORD");
const myUser = inject("myUser");
const myWallet = inject("myWallet");

</script>
<template>
  <!-- 个人功能栏 -->
  <el-dialog class="registerDialog" :title="DEFAULT_WORD.personage"
             v-model="isShow.personalDialog" :draggable="true" :modal="false"
             align-center>
    <div style="height: 80px">
      <el-avatar :size="80" :src="myUser.avatarUrl" style="margin-right: 10px; float: left; user-select: none;" @click="isShow.uploadAvatarDialog=true"></el-avatar>
      <div style="margin-top: 36px; float: left;">
        <div>
          <span style="line-height: 20px; font-size: 20px; color: black;">{{myUser.username}}&emsp13;</span>
          <span style="color: #C4991B; font-size: 13px; line-height: 14px; height: 14px; user-select: none;">Lv{{myUser.lv}}</span>
          <span v-if="myUser.member===1">S会员</span>
        </div>
        <div style="font-size: 12px; margin-top: 5px; color: rgba(100, 100, 100, 1); user-select: none;">
          <span>钻石:&ensp;{{myWallet.diamond}}&emsp;</span>
          <span>金币:&ensp;{{myWallet.coin}}</span>
        </div>
      </div>
      <div style="float: right; width: 100px; height: 80px">
        <div class="myCenterBtn" @click="isShow.personalDialog=false;router.push('/center');">>>{{DEFAULT_WORD.mySpace}}</div>
        <el-button type="danger" style="width: 100px; height: 30px; margin: 10px 0 0 0" @click="logOut">{{DEFAULT_WORD.logout}}</el-button>
      </div>
    </div>
    <div style="margin: 20px 5px; font-size: 16px; width: 450px;">
        <span style="margin: 0 auto;">
            <span style="min-width: 10px; max-width: 100px; margin: 0 15px;">{{DEFAULT_WORD.content}}</span><span style="color: black;">0</span>
            &emsp;&emsp;&emsp;|&emsp;&emsp;&emsp;粉丝&emsp;<span style="color: black;">{{myUser.fansNum}}</span>
            &emsp;&emsp;&emsp;|&emsp;&emsp;&emsp;关注&emsp;<span style="color: black;">0</span>
        </span>
    </div>
    <div style="font-size: 15px; margin: 20px 5px;">
      {{myUser.signature}}
    </div>
  </el-dialog>
</template>
<style scoped>
.myCenterBtn {
    user-select: none;
    width: 100px; 
    height: 40px; 
    margin: 0;
}

.myCenterBtn:hover {
    color: var(--subject-color);
}
</style>